﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的评论</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <link rel="stylesheet" href="/css/amazeui.min.css" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="css/style_comment.css" rel="stylesheet" type="text/css"/>
    <link href="css/aui/aui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript" src="js/aui/aui-dialog.js" ></script>
    <script type="text/javascript" src="/js/amazeui.min.js" ></script>
    <style type="text/css">
        img{
            display: inline-block;
        }
        .del{
            float: right;
            color: red;
            font-size: 13px;
        }
        #loadmore{
            text-align: center;
            color: #03A9F4;
            margin: 5px;
        }
        html,body{height:auto}
    </style>
</head>
<body>

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed b-line">
        <a href="person" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">我的评论</span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-sys"></i>
        </a>
    </header>
    #include('header.html')
    <section class="aui-scrollView">
        #set(i=0)
        #for(com : cCommentList)
        <a href="javascript:;" class="aui-assets-item comment${com.cId}">
            <div class="aui-assets-day">
                <i class="icon icon-time"></i>${com.time}
            </div>
            <div class="aui-assets-box">
                <h2><span onclick="javascript:location.href='detail?vId=${com.cVid}'" style="color: #03A9F4;">#${com.uname}#</span> <span class="del" onclick="dodel(${com.cId})">删除</span></h2>
                <div class="aui-flex" onclick="javascript:location.href='detail?vId=${com.cVid}'">
                    <div class="aui-flex-box">
                        <p>${com.cContent}</p>
                    </div>
                </div>
                <ul data-am-widget="gallery" class="am-gallery am-avg-sm-6 am-avg-md-3 am-avg-lg-4 am-gallery-default" style="margin-left: -10px;" data-am-gallery="{ pureview: true }" >
                    #for(pic : commentPic[i])
                    <li>
                        <div class="am-gallery-item">
                            <img src="images/picture/${pic.pFilename}"/>
                        </div>
                    </li>
                    #end
                </ul>
            </div>
        </a>
        #set(newId=com.cId)
        #set(i=i+1)
        #end
        <p id="loadmore">加载更多</p>
    </section>
</section>
<script type="text/javascript">
    var newId = ${newId};
    var dialog = new auiDialog({})
    function dodel(id) {
        dialog.alert({
            msg:'确定删除该评论吗？',
            buttons:['取消','确定']
        },function(ret){
            if(ret.buttonIndex == 2){
                $.ajax({
                    url:"delComment",
                    dataType:"json",
                    type:"post",
                    data:{cId : id},
                    success:function(result){
                        $(".aui-dialog").remove();
                        if(result.status=="1"){
                            dialog.alert({
                                msg:''+result.tips,
                                buttons:['确定']
                            });
                            $(".aui-mask").addClass("aui-mask-in");
                            $(".aui-mask").removeClass("aui-mask-out");
                            $(".comment"+id).remove();
                        }
                        else {
                            dialog.alert({
                                msg:''+result.tips,
                                buttons:['确定']
                            });
                            $(".aui-mask").addClass("aui-mask-in");
                        }
                    },
                    error:function(result){
                        console.log(result);
                        dialog.alert({
                            msg:'系统繁忙！',
                            buttons:['确定']
                        });
                    }
                });
            }
        });
    }
    $("#loadmore").click(function(){
        var loadmore = $("#loadmore");
        loadmore.text("加载中...");
        $.ajax({
            url:"getComment",
            dataType:"json",
            type:"post",
            data:{id : newId},
            success:function(result){
                if(result.status=="1"){
                    loadmore.before(result.s);
                    loadmore.text(result.tips);
                    newId = result.id;
                }
                else {
                    loadmore.text(result.tips);
                }
            },
            error:function(result){
                console.log(result);
                loadmore.text("系统繁忙，请稍后再试。");
                dialog.alert({
                    msg:'系统繁忙！',
                    buttons:['确定']
                });
            }
        });
        // $(this).before('<a href="javascript:;" class="aui-assets-item">'+
        //     '<div class="aui-assets-day">'+
        //     '<i class="icon icon-time"></i>2018.09.11'+
        //     '</div>'+
        //     '<div class="aui-assets-box">'+
        //     '<h2>优惠券到账</h2>'+
        //     '<div class="aui-flex">'+
        //     '<div class="aui-flex-img">'+
        //     '<img src="images/voucher-003.png" alt="">'+
        //     '</div>'+
        //     '<div class="aui-flex-box">'+
        //     '<p>你昨666日获得了5张优惠券，总计140元，快去看看吧！！</p>'+
        //     '</div>'+
        //     '</div>'+
        //     '</div>'+
        //     '</a>');
    });
</script>
<script>
    //判断页面滚动到顶部和底部
    $(window).scroll(function(){
        var doc_height = $(document).height();
        var scroll_top = $(document).scrollTop();
        var window_height = $(window).height();
// console.log(scroll_top)
        if(scroll_top == 0){
            // alert("到顶啦");
        }else if(scroll_top + window_height >= doc_height){
            $("#loadmore").click();
        }
    });
</script>
</body>
</html>
